<template>
  <el-card class="box-card">
    <!-- 搜索栏 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-input
          v-model="searchText"
          placeholder="请输入内容"
          class="input-with-select"
          clearable
        >
          <template #append>
            <el-button
              :icon="Search"
              @click="getList"
            />
          </template>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-button
          type="primary"
          @click="handleAddUser"
        >
          添加用户
        </el-button>
      </el-col>
    </el-row>

    <!-- table -->
    <el-table
      :data="tableData"
      border
      class="mt20 w100"
    >
      <el-table-column
        type="index"
        label="#"
      />
      <el-table-column
        prop="username"
        label="姓名"
      />
      <el-table-column
        prop="email"
        label="邮箱"
      />
      <el-table-column
        prop="mobile"
        label="电话"
      />
      <el-table-column
        prop="role_name"
        label="角色"
      />
      <el-table-column label="状态">
        <template #default="slot">
          <el-switch
            v-model="slot.row.mg_state"
            @change="updateUserStatus(slot.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="220"
      >
        <template #default="scope">
          <el-button
            @click="handleEdit(scope.row)"
            type="primary"
            :icon="Edit"
          />
          <el-popconfirm
            :title="'确认删除'+scope.row.username+'吗？'"
            @confirm="deleteUserById(scope.row)"
          >
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
              />
            </template>
          </el-popconfirm>

          <el-tooltip
            class="item"
            effect="dark"
            content="分配角色"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="warning"
              :icon="Setting"
              @click="assignRole(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :pagenum="listParams.pagenum"
      :pagesize="listParams.pagesize"
      :total="total"
      :load-list="getList"
    />

    <!-- 新增/编辑用户 -->
    <add-update-user
      v-model="addUpdateVisible"
      :curr-id="currId"
      :curr-row="currRow"
      @success="handleSuccess(1)"
    />

    <!-- 分配权限 -->
    <Assign
      v-model="assignVisible"
      :curr-row="currRow"
      @success="handleSuccess(2)"
    />
  </el-card>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue'
import { Search, Edit, Delete, Setting } from '@element-plus/icons-vue'
import { getUserList, reqUpdateStatus, reqDeleteUser } from '@/api/user'
import type { IUser } from '@/api/types/user'
import Pagination from '@/components/Pagination.vue'
import { ElMessage } from 'element-plus'
import AddUpdateUser from './AddUpdate.vue'
import Assign from './Assign.vue'

// 存储列表
const total = ref(0)
const tableData = ref<IUser[]>([])
// 分页参数
const listParams = reactive({
  pagenum: 1,
  pagesize: 10
})
const searchText = ref('')
onMounted(() => {
  getList()
})

const getList = async () => {
  const res = await getUserList({
    query: searchText.value,
    ...listParams
  })

  tableData.value = res.users
  total.value = res.total
}

const updateUserStatus = async (row: IUser) => {
  try {
    await reqUpdateStatus(row.id, row.mg_state)
    ElMessage.success('修改状态成功')
  } catch (err) {
    console.log('err', err)
  }
}

const addUpdateVisible = ref(false)

const currId = ref<number | string>('')
const currRow = ref({})
// 添加用户弹窗
const handleAddUser = () => {
  currId.value = ''
  currRow.value = {}
  addUpdateVisible.value = true
}
// 编辑用户
const handleEdit = (row: IUser) => {
  currId.value = row.id
  currRow.value = row
  addUpdateVisible.value = true
}

const handleSuccess = (val: number) => {
  if (val === 1) {
    addUpdateVisible.value = false
  } else {
    assignVisible.value = false
  }
  getList()
}

// 删除用户
const deleteUserById = async (row: IUser) => {
  try {
    await reqDeleteUser(row.id)
    ElMessage.success('删除用户成功')
    getList()
  } catch (err) {
    console.log('reqDeleteUser', err)
  }
}

const assignVisible = ref(false)

const assignRole = (row: IUser) => {
  assignVisible.value = true
  currRow.value = row
}

</script>
<style lang='scss' scoped>
</style>
